<template>
  <panel-head></panel-head>
  <el-card style="min-height: 100%">
    <div class="flex">
      <el-form :model="searchForm" inline>
        <el-form-item prop="out_trade_no">
          <el-input v-model="searchForm.out_trade_no" placeholder="订单号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button
      type="primary"
      size="small"
      icon="Plus"
      @click="dialogFormVisible = true"
      >新增</el-button
    >
    <el-popconfirm
      title="是否确认删除？"
      confirm-button-text="是"
      cancel-button-text="否"
      icon-color="#626AEF"
      @confirm="handleConfirmDelete"
    >
      <template #reference>
        <el-button type="danger" icon="Delete" size="small">Delete</el-button>
      </template>
    </el-popconfirm>
    <!-- 表格 -->
    <el-table
      :data="permissionTableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="out_trade_no" label="订单号" fixed width="140" />

      <el-table-column
        prop="hospital_name"
        label="就诊医院"
        show-overflow-tooltip
      />
      <el-table-column
        prop="service_name"
        label="就诊服务"
        show-overflow-tooltip
      />

      <el-table-column
        prop="avatar"
        label="陪护师头像"
        show-overflow-tooltip
        width="100"
      >
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.companion.avatar"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="companion.mobile"
        label="陪护师手机号"
        width="120"
      />

      <el-table-column prop="price" label="总价" />
      <el-table-column prop="paidPrice" label="已付" />

      <el-table-column prop="create_time" label="时间" width="120">
        <template #default="scope">
          <div class="flex">
            <el-icon><Clock /></el-icon>
            <span>{{ dayjs(scope.row.start_time).format("YYYY-MM-DD") }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="permissions_id" label="状态">
        <template #default="scope">
          <el-tag :type="statusMap(scope.row.trade_state)">
            {{ scope.row.trade_state }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="service_state" label="接单状态" />

      <el-table-column prop="tel" label="联系人手机号" width="120" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
            title="是否确认完成？"
            confirm-button-text="是"
            v-if="scope.row.trade_state === '待服务'"
            cancel-button-text="否"
            icon-color="#626AEF"
            @confirm="handleConfirmFinish(scope.row.out_trade_no)"
          >
            <template #reference>
              <el-button type="primay" link>服务完成</el-button>
            </template>
          </el-popconfirm>

          <el-button v-else type="primay" link disabled>暂无服务</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        layout="total, prev, pager, next"
        :total="permissionTableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import dayjs from "dayjs";
import { useStore } from "vuex";
import { ref, reactive, onMounted, nextTick } from "vue";
import { adminOrderListApi, updateOrderApi } from "../../../api/index";
import { ElMessage } from "element-plus";

const store = useStore();

const statusMap = (key) => {
  const objMap = {
    已取消: "info",
    待支付: "warning",
    已完成: "success",
  };
  return objMap[key];
};

/* 表单数据 */
const searchForm = reactive({
  out_trade_no: ''
});

/** 列表数据 */
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10,
});

/** 表格数据 */
const permissionTableData = ref([]);
const permissionTableTotal = ref([]);
const getListData = async (params = {}) => {
  const { code, data } = await adminOrderListApi({
    ...paginationData,
    ...params
  });
  if (code === 10000) {
    data.list.forEach((item) => {
      item.create_time = dayjs(item.create_time).format("YYYY-MM-DD");
    });
    permissionTableData.value = data.list;
    permissionTableTotal.value = data.total;
  }
};

/**  页数改变 */
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getListData();
};

/** 上一页、下一页 */
const handleCurrentChange = (val) => {
  paginationData.pageNum = val;
  getListData();
};

/** 完成 */
const handleConfirmFinish = async (out_trade_no) => {
  console.log(111, out_trade_no);
  const { code, data } = await updateOrderApi({
    id: out_trade_no
  })
  getListData()
};

/** 搜索 */
const handleSearch = () => {
  getListData(searchForm)
}

onMounted(() => {
  getListData();
});
</script>

<style lang="less" scoped>
.flex {
  justify-content: flex-end;
}
</style>